<@override name="content">
<div id="app">

<el-container v-loading="loading">
    <el-main>
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="商品ID：">
                <el-input v-model.trim="queryData.pid" size="mini" placeholder="请输入商品ID" clearable></el-input>
            </el-form-item>
            <el-form-item label="商品名称：">
                <el-input v-model.trim="queryData.name" size="mini" placeholder="请输入姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label="商品状态"  label-width="100px">
                <el-select size="small" v-model="queryData.status" clearable placeholder="请选择商品状态" style="width: 100%">
                    <el-option
                            v-for="item in statusList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="" class="itemTime">
                <el-button type="primary" class="lastItem" size="mini" @click="getList">查询</el-button>
                <el-button type="primary" class="lastItem" size="mini"@click="addClick()">新建</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="pid"
                    label="商品ID"
                    width="180">
            </el-table-column>
            <el-table-column label="图片" width="180">
                <template slot-scope="scope">
                    <img v-if="scope.row.picture"
                         :src="'/file/attachment/'+scope.row.picture+'/s'"
                         style="height: 100px;width: 100px">
                </template>
            </el-table-column>
            <el-table-column
                    show-overflow-tooltip
                    prop="name"
                    label="名称"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="categoryName"
                    label="分类"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="rebate"
                    label="佣金"
                    width="120">
            </el-table-column>
            <el-table-column
                    label="已上架/已下架"
                    width="180">
                <template slot-scope="scope">
                    <span v-if="scope.row.status== 1">已上架</span>
                    <span v-else style="color: red">已下架</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="创建时间"
                    width="180">
                <template slot-scope="scope">{{ scope.row.createAt}}</template>
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
                    width="140">
                <template slot-scope="scope">
                    <el-link @click="updateClick(scope.row)" type="primary">修改</el-link>
                    <el-link @click="downClick(scope.row)"  type="primary">{{scope.row.status== 0?'上架':'下架'}}</el-link>
                    <el-link @click="delClick(scope.row)" type="danger">删除</el-link>
                </template>
            </el-table-column>
        </el-table>
        <div class="pageBox">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="queryData.pageNum" :page-sizes="[10, 20, 50, 100]"
                :page-size="queryData.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="count" background>
            </el-pagination>
        </div>

    </el-main>

</el-container>

<el-dialog  :title="addForm.id?'编辑商品':'新增商品'" :visible.sync="dialogVisible" width="80%">

    <el-form :model="addForm" label-position="right" label-width="140px">
        <el-form-item label="商品名称：" required>
            <el-input v-model="addForm.name" class="input-long" placeholder="请输入" maxlength="100" show-word-limit
            ></el-input>
        </el-form-item>

        <el-form-item label="图片：" required prop="intro" class="quill-editor-box">
            <el-upload accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
                       class="avatar-uploader" ref="upload"
                       action="#"
                       v-loading="loading"
                       :show-file-list="false"
                       :http-request="HttpRequest"
                       :before-upload="beforeAvatarUpload">
                <temple v-if="addForm.picture_show||addForm.picture">
                    <img v-if="addForm.picture_show" :src="addForm.picture_show" class="avatar">
                    <img v-if="addForm.picture&&!addForm.picture_show" :src="'/file/attachment/'+addForm.picture+'/s'" class="avatar">
                </temple>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>


        <el-form-item label="价格：" required>
            <el-input v-model="addForm.price" class="input-long"  maxlength="8"
                      show-word-limit placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="返佣：" required>
            <el-input v-model="addForm.rebate" class="input-long"  maxlength="8"
                      show-word-limit placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="分类：" required>
            <el-select clearable filterable v-model="addForm.categoryCode"
                       placeholder="请选择" @change="onChangeCategoryList">
                <el-option v-for="item in categoryList" :key="item.code" :label="item.name" :value="item.code"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="上下架：" required>
            <template>
                <el-radio  v-model="addForm.status" :label="1">上架</el-radio>
                <el-radio  v-model="addForm.status" :label="0">未上架</el-radio>
            </template>
        </el-form-item>
        <el-form-item label="是否推荐：">
            <template>
                <el-radio v-model="addForm.recommend" :label="1">已推荐</el-radio>
                <el-radio  v-model="addForm.recommend" :label="0">未推荐</el-radio>
            </template>
        </el-form-item>
        <el-form-item label="描述：">
            <el-input v-model="addForm.description" class="input-long"
                      placeholder="请输入"
                      type="textarea"
                      :rows="3"
            ></el-input>
        </el-form-item>
        <el-form-item label="主图：" prop="intro" class="quill-editor-box">
            <el-upload accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
                       class="avatar-uploader" ref="upload"
                       action="#"
                       v-loading="loading"
                       :show-file-list="false"
                       :http-request="HttpRequest2"
                       :before-upload="beforeAvatarUpload">
                <temple v-if="addForm.mainPicture_show||addForm.mainPicture">
                    <img v-if="addForm.mainPicture_show" :src="addForm.mainPicture_show" class="avatar">
                    <img v-if="addForm.mainPicture&&!addForm.mainPicture_show" :src="'/file/attachment/'+addForm.mainPicture+'/s'" class="avatar">
                </temple>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini"  type="primary" @click="onSure">确 定</el-button>
    </div>
</el-dialog>
</div>
<script src="/res/js/page/productPage.js"></script>
<style scoped>
    .item-w{
        width: 500px;
    }
    .pageBox {
        margin-top: 20px;
        text-align: right;
    }
</style>
</@override>

<!-- extends 一定要写在页面最下方 -->
<@extends name="_base.html"/>